<template>
  <div class="wrap-gone">
    <div class="banner" :style="{height:bannerHeight+'px'}">
      <div class="shop" @click="buy"><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/shop-car.png" alt=""><span>去购买</span></div>
    </div>
    <div class="icon">
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/icon-1.png" alt=""><span>全网客户</span></div>
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/icon-2.png" alt=""><span>高曝光</span></div>
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/icon-3.png" alt=""><span>获客成本低</span></div>
      <div><img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/icon-4.png" alt=""><span>易操作</span></div>
    </div>
    <div class="left-word">
      <div>提高油站展示排名，高曝光高销量，能+精准流量分配规则，享有油站展示优先权，更多的流量转化为更多的销售额。</div>
      <img class="computer" src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/content-1.png" alt="">
    </div>
    <div class="left-word">
      <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/content-2.png" alt="">
      <div>高排名叠加价格优惠效果更佳实现油站收益最大化，商家可自选时段，设置油站在团油APP列表展示前三位第一时间吸引周边需要加油的顾客，提高顾客选择几率</div>
    </div>
     <div class="left-word">
      <div>能+大数据营销系统智能算法，享有指定公里数范围内的排他优先展示权，可自动计算本油站优先展示的区域范围，该范围内的潜在顾客打开团油App，仅可优先看到您的油站</div>
      <img src="https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/content-3.png" alt="">
    </div>
    <Footer/>
  </div>
</template>
<script>
import mixins from '../../components/onResize/mixin'
import Footer from './components/footer'
export default {
  mixins: [mixins],
  data() { 
    return {
      bannerHeight: 400
    } 
  },
  methods: {
    buy() {
      this.$router.push({ path: '/marketShop/shopCenter' })
    },
    setSize () {
      // 通过浏览器宽度(图片宽度)计算高度
      if(this.screenWidth < 1080) return
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
  },
  components: {
    Footer
  }
}
</script>
<style lang="less" scoped>
.wrap-gone{
  width: 100%;
  padding: 10px 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.banner{
  width: 100%;
  background: url('https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/merchant/showPage/sort/gas-banner.png') no-repeat;
  background-size: 100%;
  position: relative;
  margin-bottom: 20px;
  .shop{
    position: absolute;
    width: 240px;
    top: 70%;
    left: 10%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #034CAA;
    border-radius: 25px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #2966FF;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    >img{
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      cursor: pointer;
    }
  }
}
.icon{
  width: 100%;
  height: 150px;
  padding: 0 100px;
  display: flex;
  justify-content: space-around;
  >div{
    width: 140px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    >img{
      display: block;
      width: 100px;
      height: 100px;
    }
    >span:nth-child(2) {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
.left-word{
  width: 70%;
  height: 350px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  >div{
    width: 350px;
  }
  .computer{
    display: block;
    width: 354px;
    height: 200px;
    margin-top: 80px;
  }
  >img{
    display: block;
    width: 283px;
    height: 200px; 
  }
}
</style>